import {
  Text,
  VStack,
  Button,
  Input,
  Heading,
  Box,
  Checkbox,
  FormControl,
  FormLabel,
  FormErrorMessage,
  useToast,
} from "@chakra-ui/react";
import { Form, Formik } from "formik";
import { useState } from "react";
import * as Yup from "yup";
import { TagInit } from "./Tag";

const SignupSchema = Yup.object({
  username: Yup.string()
    .matches(/^[a-zA-Z0-9_]+$/, "用户名只能包含字母、数字与下划线")
    .required("请输入用户名"),
  password: Yup.string().min(8, "最短密码为 8 位").required("请输入密码"),
  passwordConfirmation: Yup.string()
    .oneOf([Yup.ref("password")], "两次输入的密码不匹配")
    .required("请确认密码"),
  phone: Yup.string()
    .matches(
      /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
      "手机号码为 11 位数字"
    )
    .required("请输入手机号码"),
  eula: Yup.boolean().equals([true], "请同意最终用户许可条款"),
});

export const SignupForm = () => {
  const toast = useToast();
  const myTags: string[] = [];
  const [tags, setTags] = useState(myTags);

  return (
    <Formik
      initialValues={{
        username: "alice",
        password: "12345678",
        passwordConfirmation: "12345678",
        phone: "13312345678",
        department: "计算机科学与技术学院",
        tags: tags,
        eula: true,
      }}
      validationSchema={SignupSchema}
      onSubmit={(values, actions) => {
        const { passwordConfirmation, eula, ...signupData } = values;
        console.log(tags);
        
        signupData["tags"] = tags;
        console.log(JSON.stringify(signupData));
        

        fetch("/api/auth/register", {
          method: "POST",
          body: JSON.stringify(signupData),
          headers: { "content-type": "application/json" },
        })
          .then((res) => {
            if (res.ok) {
              return res.json();
            }
          })
          .then((res) => {
            if (res !== undefined) {              
              toast({ title: JSON.stringify(res) });
              localStorage.setItem("accessToken", res.accessToken);
              actions.setSubmitting(false);
              window.location.reload();
            } else {
              toast({ title: "注册失败" });
              actions.setSubmitting(false);
            }
          })
          .catch((err) => {
            toast({ title: "注册失败", description: err.toString() });
            actions.setSubmitting(false);
          });
      }}
    >
      {(formik) => (
        <Form>
          <VStack
            align="center"
            justify={{ base: "flex-start" }}
            direction={{ base: "column" }}
            wrap="nowrap"
            minH="70vh"
            px={8}
            mb={16}
            spacing="48px"
            w="100%"
          >
            <VStack>
              <Text color="primary.800">加入果壳众包</Text>
              <Heading as="h1" color="primary.800">
                创建你的账户
              </Heading>
            </VStack>

            <Box px={{ base: 0, sm: 8 }} w={{ base: "100%", sm: "30em" }}>
              <VStack>
                <Heading as="h2" size="md">
                  基本信息
                </Heading>
                <FormControl
                  isInvalid={
                    formik.touched.username && Boolean(formik.errors.username)
                  }
                >
                  <FormLabel htmlFor="username">用户名</FormLabel>
                  <Input
                    id="username"
                    onChange={formik.handleChange}
                    value={formik.values.username}
                  />
                  <FormErrorMessage>{formik.errors.username}</FormErrorMessage>
                </FormControl>
                <FormControl
                  isInvalid={
                    formik.touched.password && Boolean(formik.errors.password)
                  }
                >
                  <FormLabel htmlFor="password">密码</FormLabel>
                  <Input
                    id="password"
                    onChange={formik.handleChange}
                    value={formik.values.password}
                    type="password"
                  />
                  <FormErrorMessage>{formik.errors.password}</FormErrorMessage>
                </FormControl>
                <FormControl
                  isInvalid={
                    formik.touched.passwordConfirmation &&
                    Boolean(formik.errors.passwordConfirmation)
                  }
                >
                  <FormLabel>确认密码</FormLabel>
                  <Input
                    id="passwordConfirmation"
                    onChange={formik.handleChange}
                    value={formik.values.passwordConfirmation}
                    type="password"
                  />
                  <FormErrorMessage>
                    {formik.errors.passwordConfirmation}
                  </FormErrorMessage>
                </FormControl>
                <Heading as="h2" size="md" pt={4}>
                  其他信息
                </Heading>
                <FormControl
                  isInvalid={
                    formik.touched.phone && Boolean(formik.errors.phone)
                  }
                >
                  <FormLabel htmlFor="phone">手机号码</FormLabel>
                  <Input
                    id="phone"
                    onChange={formik.handleChange}
                    value={formik.values.phone}
                  />
                  <FormErrorMessage>{formik.errors.phone}</FormErrorMessage>
                </FormControl>
                <FormControl
                  isInvalid={
                    formik.touched.department &&
                    Boolean(formik.errors.department)
                  }
                >
                  <FormLabel htmlFor="department">学院</FormLabel>
                  <Input
                    id="department"
                    onChange={formik.handleChange}
                    value={formik.values.department}
                  />
                  <FormErrorMessage>
                    {formik.errors.department}
                  </FormErrorMessage>
                </FormControl>
                <FormControl>
                  <FormLabel htmlFor="tag">兴趣特长</FormLabel>
                  <TagInit
                    myTags={tags}
                    setMyTags={setTags}
                  />
                </FormControl>
                <FormControl
                  pt={4}
                  isInvalid={formik.touched.eula && Boolean(formik.errors.eula)}
                >
                  <Checkbox
                    align="center"
                    colorScheme="primary"
                    id="eula"
                    onChange={formik.handleChange}
                    isChecked={formik.values.eula}
                  >
                    我已阅读并同意最终用户许可条款
                  </Checkbox>
                  <FormErrorMessage>{formik.errors.eula}</FormErrorMessage>
                </FormControl>
              </VStack>
            </Box>
            <Button
              type="submit"
              isLoading={formik.isSubmitting}
              w={{ base: "100%", sm: "26em" }}
              colorScheme="primary"
            >
              创建账户
            </Button>
          </VStack>
        </Form>
      )}
    </Formik>
  );
};
